import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import {observer} from 'mobx-react';
import { Tools, Bubble } from 'weaver-mobile';

const getLabel = Tools.getLabel;

@withRouter
@observer
export default class LocationInfo extends Component {
    render(){
        const {store} = this.props;
        const {locationInfo, distance, locationSetting} = store;
        const {address} = locationInfo;
        const {dis, locationcheck} = distance || {};
        let distanceInfo = `(${getLabel('500504','距最近的 {param1} {param2}千米')})`;
        if(dis){
            distanceInfo = distanceInfo.replace('{param1}', getLabel('391196', '办公地点'));
            distanceInfo = distanceInfo.replace('{param2}', (dis / 1000).toFixed(1));
        }
        const {locations} = locationSetting || {};

        return (
            <div className='info'>
                <div className='range'>
                    <span>{getLabel('126403','我的位置')}</span>
                    {
                        locationcheck && locations && locations.length > 0 && 
                        <span>{distanceInfo}</span>
                    }
                </div>
                <div className='position'>{address || ''}</div>
            </div>
        )
    }
}